<template>
  <div class="container">
    <header-nav></header-nav>
    <div class="mincard mindWidth">
      <span @click="$router.push('/')">首页</span>>
      <span>专利查询</span>
    </div>
    <div class="content mindWidth">
      <div class="search_bar">
        <input type="text" placeholder="请输入企业名称" v-model="dataName" />
        <button @click="toDetail">搜索</button>
      </div>
      <img
        src="../../../static/image/patentPay.jpg"
        style="width: 80%;margin: 20px auto"
        v-if="companyList.length === 0"
      />
      <div class="search-list" v-else>
        <ul>
          <li v-for="(item,index) in companyList" :key="item.companyId" @click="toPatent(item)">
            <span v-html="item.newCompanyName"></span>
          </li>
        </ul>
      </div>
    </div>
    <navigation></navigation>
    <footer-nav></footer-nav>
  </div>
</template>
<script>
import {
  commonRequest,
  postRequest,
  queryPatentNumberWhetherExist
} from "../../api/api.js";
import { debounce } from "../../util/throttle.js";

export default {
  data() {
    return {
      dataName: "",
      companyList: []
    };
  },
  watch: {
    dataName: debounce(function(e) {
      this.changeValue();
    }, 500)
  },
  mounted() {},
  methods: {
    changeValue() {
      if (this.dataName === "") {
        this.companyList = [];
      } else {
        postRequest("/api/es/company/query.json", {
          companyName: this.dataName,
          area: "",
          city: "",
          companyId: "",
          endLat: 0,
          endLng: 0,
          pageIndex: 0,
          pageSize: 10,
          province: "",
          startLat: 0,
          startLng: 0
        }).then(res => {
          if (res.retCode == 0) {
            // 查企业的列表内容
            for (let i = 0; i < res.data.content.length; i++) {
              if (this.dataName !== "") {
                this.$set(res.data.content[i], "newCompanyName", "");
                // console.log('11111',res.data.content[i])
                res.data.content[i].newCompanyName =
                  res.data.content[i].companyName;
                res.data.content[i].newCompanyName = res.data.content[
                  i
                ].newCompanyName.replace(
                  new RegExp(this.dataName, "g"),
                  `<em style="color:red;font-style:normal;">${this.dataName}</em>`
                );
              }
            }
            this.companyList = res.data.content;
            // console.log(this.companyList);
          }
        });
      }
    },
    toDetail() {
      var reg = /^[a-zA-Z]+$/;
      if (reg.test(this.dataName)) {
        this.$message({
          message: "请输入正确的企业",
          type: "warning"
        });
      } else {
        window.open(`/patentList?name=${this.dataName}`, "_blank");
      }
    },
    toPatent(item) {
      window.open(
        `/patentList?id=${item.companyId}&name=${item.companyName}`,
        "_blank"
      );
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  .mincard {
    span {
      font-size: 14px;
      cursor: pointer;
      margin: 0 10px;
    }
  }

  .content {
    background: #fff;
    box-sizing: border-box;
    padding: 20px 30px;
    // box-shadow: 0 0 10px #ccc;
    margin: 40px auto;

    .search_bar {
      // position: relative;
      margin: 0 auto;
      width: 750px;
      display: flex;

      input {
        height: 60px;
        width: 90%;
        border: 1px solid #44a2ff;
        border-radius: 4px 0 0 4px;
        //   font-size: 20px;
        padding-left: 10px;
        color: #000;

        &::placeholder {
          color: #ddd;
        }
      }

      button {
        border-radius: 0px 4px 4px 0;
        height: 60px;
        width: 10%;
        font-size: 18px;
        color: #fff;

        i {
          font-size: 18px;
          color: #fff;
        }
      }
    }

    .search-list {
      width: 750px;
      min-height: 400px;
      margin: 0 auto;

      ul {
        width: 90%;
        background: #fff;

        li {
          box-sizing: border-box;
          padding: 15px 5px;
          border-bottom: 1px solid rgba(154, 154, 154, 0.2);
        }
      }
    }
  }
}
</style>
